import formConfigFn from "./formConfigFn";

export default function () {
    return {
        tableConfig: {
            options: {
                data: [
                    // {
                    //     "id": 1,
                    //     "name": "邱秀兰",
                    //     "age": 22,
                    //     "birthday": "1972-04-20 18:43:56",
                    //     "gender": 0,
                    //     "img": "http://dummyimage.com/88x31",
                    //     "county": "甘肃省 天水市 甘谷县",
                    //     "hasChildren": true,
                    //     "boolDel": 1
                    // }
                ],
                // column: true
            },
            columns: [
                { type: "selection", width: 60 },
                { label: "id", prop: "id", width: 120 },
                { label: "姓名", prop: "name" },
                {
                    label: "性别",
                    prop: "gender",
                    formatter: ({ gender }) => {
                        return gender ? "男" : "女";
                    },
                    // 筛选演示
                    columnKey: "gender",
                    filters: [
                        { text: "男", value: 1 },
                        { text: "女", value: 0 },
                    ],
                    ["filter-method"] (value, row, column) {
                        return row.gender === value;
                    },
                },
                {
                    label: "年龄",
                    prop: "age",
                    width: 200,
                    sortable: true,
                },
                //render演示
                // {
                //     label: "图片",
                //     render: (row, h) => {
                //         console.log(this);
                //         return (
                //             <el-image style="width: 100px; height: 100px" src={row.img} previewSrcList={[row.img]} fit="contain"></el-image>
                //         )
                //     }
                // },
                { label: "家庭住址", prop: "county" },

                {
                    label: "出生日期",
                    prop: "birthday",
                    width: 200,
                    sortable: true,
                },
                // 插槽演示
                // {
                //     label: "操作",
                //     type: "slot",
                //     slotName: "operate",
                // },
                // render样式
                {
                    label: "操作",
                    render: (row, h) => {
                        return (
                            <span>
                                <el-button type="text" size="small" on-click={() => { this.push({ name: "basicGridDetails", }, row); }}>编辑</el-button>
                                <el-button type="text" size="small" on-click={() => { this.del(row.id); }} >删除</el-button>
                            </span>
                        );
                    },
                },
            ],
            events: {
                "selection-change": (list) => {
                    this.batchId = list.map((item) => item.id);
                },
            },

        },
        toolbarConfig: [
            {
                content: "新增",
                type: "primary",
                icon: "el-icon-plus",
                click: () => {
                    this.$dialog({
                        options: {
                            center: true,
                            width: '1000px'
                        },
                        btns: [
                            {
                                submit: true, type: "primary", size: 'small', content: "确定", click: (options) => {
                                    console.log(this);
                                    this.$refs.form.submitForm().then(async params => {
                                        let interfaceType = 'addTable'
                                        if (row) {
                                            interfaceType = 'editTable'
                                        }
                                        const res = await this.$api[interfaceType](params);
                                        res && this.$message({
                                            message: row ? '编辑成功！' : '添加成功！',
                                            type: 'success'
                                        });
                                        this.$refs.grid.getData();
                                        options.dialogVisible = false
                                    })
                                }
                            },
                            {
                                content: "取消", size: 'small', click: (options) => {
                                    options.dialogVisible = false
                                }
                            }
                        ],
                        render: (row, h) => {
                            const formConfig = this.$observable(formConfigFn())
                            return (
                                <ChfForm  {...{ attrs: formConfig }} ref="form" />
                            )
                        },
                    })
                }

            },
            {
                content: "上传",
                type: "primary",
                icon: "el-icon-upload",
                click: async () => {
                    const files = await this.$readFile({
                        accept: ".png",
                        fileSize: 2,
                        // multiple: true,
                    })
                    this.$message.success(`选了${files.length || 1}个文件`);
                    console.log(files);
                }
            },
            {
                content: "批量删除",
                icon: "el-icon-delete",
                click: () => this.del(),
            },
        ],
        pagerConfig: {
            options: {
                pageSize: 10,
            },
            events: {},
        },
        proxyConfig: {
            api: "getTableData",
            //请求之前
            beforeQuery (params) {
                return params;
            },
        },
        formConfig: {
            options: {
                inline: true,
                // size: 'mini',
            },
            items: [
                {
                    formItem: { label: "性别" },
                    itemRender: {
                        el: "el-select",
                        placeholder: "选择性别",
                        value: "region",
                        options: [],
                        async query () {
                            setTimeout(() => {
                                this.options = [
                                    { label: "男", value: 1 },
                                    { label: "女", value: 0 },
                                ];
                            }, 5000);
                        },
                    },
                },
                {
                    formItem: { label: "姓名" },
                    itemRender: {
                        el: "el-input",
                        placeholder: "搜索姓名",
                        value: "name",
                    },
                },
                {
                    type: 'button',
                    formItem: {
                        children: [
                            { content: '查询', submit: true, type: 'primary' },
                            { content: '重置', reset: true }
                        ]
                    }
                }
            ],
        },
    }
}